<template>
  <div class="overView-modal-container" id="overView-modal-container">
    <a-modal
      :visible.sync="visible"
      title="数据明细"
      width="1380px"
      :footer="null"
      @cancel="handleClick()"
    >
      <div class="export-button">
        <a-button type="primary" @click="handelExport()">明细导出</a-button>
      </div>
      <div class="detail-modal-body" v-loading="loading">
        <div class="table-contaier">
          <vxe-table
            align="center"
            border
            :data="table.source"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            height="550px"
            :sort-config="{ trigger: 'cell' }"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
            :checkbox-config="{
              reserve: true,
            }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              v-for="(item, index) in table.columns"
            >
              <template #default="{ row }">
                <div>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getLoginData } from "@/tools";
import {
  getBeamInfoTJList,
  downLoadBeamInfoTJList,
} from "@/api/wisdom-beam/home";
import { downLoadFileByArraybuffer, getNowDateStr } from "@/utils";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    scStatus: {
      type: [String, Number],
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          if ([2, 3, 4, 5, 6].includes(this.scStatus)) {
            this.checkColumns();
          }
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      table: {
        source: [],
        columns: [
          {
            title: "桥梁名称",
            key: "bridgeName",
            width: 150,
          },
          {
            title: "幅别",
            key: "amClass",
            width: 80,
          },
          {
            title: "跨",
            key: "span",
            width: 100,
          },
          {
            title: "梁号",
            key: "componentParts",
            width: 150,
          },
          {
            title: "梁类型",
            key: "beamTypeDesc",
            width: 100,
          },
          {
            title: "生产时间",
            key: "scwcsj",
            width: 150,
          },
        ],
      },
      //存梁数
      statusColumns_1: [
        {
          title: "存梁时间",
          key: "cltime",
          width: 150,
        },
      ],
      //架设梁数
      statusColumns_2: [
        {
          title: "出梁时间",
          key: "ylEndTime",
          width: 150,
        },
      ],
      //已生产、已压浆 梁数
      statusColumns_3: [
        {
          title: "浇筑时间",
          key: "scwcsj",
          width: 120,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    checkColumns() {
      switch (this.scStatus) {
        case 2:
          this.table.columns = [...this.table.columns, ...this.statusColumns_1];
          return;
        case 3:
          this.table.columns = [...this.table.columns, ...this.statusColumns_2];
          return;
        case 4:
          this.table.columns.pop();
          return;
        case 5:
          this.table.columns.pop();
          this.table.columns = [...this.table.columns, ...this.statusColumns_3];
          return;
        case 6:
          this.table.columns.pop();
          this.table.columns = [...this.table.columns, ...this.statusColumns_3];
          return;
        default:
          break;
      }
    },

    getData() {
      let { tenantCode } = getLoginData();
      return new Promise((resolve, reject) => {
        this.loading = true;
        getBeamInfoTJList({
          tenantCode,
          scStatus: this.scStatus,
        })
          .then((res) => {
            let { data } = res;
            this.table.source = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.table.source = [];

            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    getContainer() {
      return document.getElementById("bl-details-modal-container");
    },

    handelExport() {
      let { tenantCode } = getLoginData();
      return new Promise((resolve, reject) => {
        downLoadBeamInfoTJList({
          tenantCode,
          scStatus: this.scStatus,
        })
          .then((res) => {
            downLoadFileByArraybuffer(res, "数据明细_" + getNowDateStr());
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    //关闭
    handleClick() {
      this.table.columns = [
        {
          title: "桥梁名称",
          key: "bridgeName",
          width: 150,
        },
        {
          title: "幅别",
          key: "amClass",
          width: 80,
        },
        {
          title: "跨",
          key: "span",
          width: 100,
        },
        {
          title: "梁号",
          key: "componentParts",
          width: 150,
        },
        {
          title: "梁类型",
          key: "beamTypeDesc",
          width: 100,
        },
        {
          title: "生产时间",
          key: "scwcsj",
          width: 150,
        },
      ];
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.export-button {
  position: absolute;
  top: 14px;
  left: 120px;
}
.overView-modal-container {
  /deep/.ant-modal-body {
    padding: 0;
  }
  .detail-modal-body {
    height: 600px;
    overflow: hidden;
    .flex();
    flex-direction: column;
    .table-contaier {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      tr {
        .multiline-item {
          margin: 2px 0;
        }
        .result-td {
          &.ok {
            color: #4bc964;
          }
          &.error {
            color: #ff3f4a;
          }
        }
      }
    }
    .pager-contaier {
      flex-shrink: 0;
      height: 80px;
      .flex();
      align-items: center;
      padding: 0 20px;
      justify-content: flex-end;
      /deep/.vxe-pager {
        padding-right: 0;
      }
    }
  }
}
</style>
